<script setup>
import { ref } from 'vue';

const features = ref([
    { title: '赵靖宇', description: '统筹项目进度与资源，确保各环节高效协同运作。', iconBg: 'icon-bg-cyan', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"/><path d="M5.5 21h13l-6.5-8z"/></svg>' },
    { title: '沈秀睿', description: '负责机器人硬件架构、传感器与嵌入式系统的设计与集成。', iconBg: 'icon-bg-violet', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 7h.01M17 7h.01M7 17h.01M17 17h.01"/></svg>' },
    { title: '林智宸', description: '领导AI算法、对话逻辑与系统架构的软件开发工作。', iconBg: 'icon-bg-emerald', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18a4 4 0 0 0 0-8"/><path d="M12 12H8a4 4 0 0 0 0 8h4"/><path d="M12 6V4"/><path d="M8 6V4"/><path d="M16 6V4"/></svg>' },
    { title: '王子豪', description: '撰写并整理项目文档，确保资料规范、可查与完整。', iconBg: 'icon-bg-rose', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16v16H4z"/><path d="M8 4v16"/><path d="M4 8h16"/></svg>' },
    { title: '王谦益', description: '明确产品需求，协调技术与用户之间的沟通桥梁。', iconBg: 'icon-bg-amber', iconSvg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h14l-1.5 9h-11z"/><path d="M7 12v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-6"/></svg>' },
]);
</script>

<template>
  <section id="team" class="section section-bg-white">
      <div class="container">
          <h2 class="section-title">项目团队</h2>
          <p class="section-subtitle">成员协作无间，共同推动AI对话机器人成型。</p>
          <div class="features-grid">
              <div class="feature-card" v-for="feature in features" :key="feature.title">
                  <div class="feature-icon-wrapper" :class="feature.iconBg">
                      <div v-html="feature.iconSvg"></div>
                  </div>
                  <h3 class="feature-title">{{ feature.title }}</h3>
                  <p class="feature-description">{{ feature.description }}</p>
              </div>
          </div>
      </div>
  </section>
</template>